{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<style>
.laytable-cell-1-0-1 {
	width: 250px!important;
}
.layui-upload {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.layui-upload .cover {
	margin-bottom: 20px;
}
.layui-upload-list {
	width: 90px;
	border: solid 1px #ccc;
	height: 90px;
}
.layui-upload-img {
	width: 100%;
	height: 100%;
	border: none;
}
.book_customize_style .layui-table-body .layui-table tr .laytable-cell-1-0-1 {
    height: auto!important;
	width: auto!important;
	min-width: 60px!important;
}
.book_customize_style .laytable-cell-1-0-1 {
	width: auto!important;
	min-width: 60px!important;
}
.book_customize_style .layui-table-body .layui-table tr .laytable-cell-1-0-3, 
.book_customize_style .layui-table-body .layui-table tr .laytable-cell-1-0-4, 
.book_customize_style .layui-table-body .layui-table tr .laytable-cell-1-0-5,
.book_customize_style .layui-table-body .layui-table tr .laytable-cell-1-0-6 {
    height: auto!important;
	width: auto!important;
	min-width: 230px!important;
}
.book_customize_style strong {
	color: #bdbdbd;
	font-weight: normal;
}
</style>
<div class="p-3">
	<form class="layui-form gg-form-bar border-t border-x">
		<div class="layui-input-inline">
			<select name="cate_id">
				<option value="">请选择作品分类</option>
				{volist name=":set_recursion(get_book_cate())" id="v"}
				<option value="{$v.id}">{$v.title}</option>
				{/volist}
			</select>
		</div>
		{if get_addons_is_enable('caijipro')}
			<div class="layui-input-inline">
				<select name="coll_source_id">
					<option value="">请选择采集源</option>
					{volist name=":model('addons_caijipro_rule')->field('id,title')->where(['status' => 1])->order('id desc')->select()" id="vo"}
					<option value="{$vo.id}">{$vo.title}</option>
					{/volist}
				</select>
			</div>
		{/if}
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" />
		</div>		
		<div class="layui-input-inline">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
		</div>
	</form>
	<table class="layui-hide" id="book" lay-filter="book"></table>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-group">
		<span class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" data-title="添加作品">添加作品</span>
		<span class="layui-btn layui-btn-sm" lay-event="import" data-title="导入作品">导入作品</span>
		<span class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete" data-title="删除作品">删除作品</span>
  	</div>
</script>

<script type="text/html" id="barDemo">	
	<div class="layui-btn-group">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="chapter">章节</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</div>
</script>

<script type="text/html" id="statusTpl">
	<input type="checkbox" name="status" value="{{d.status}}" lay-skin="switch" lay-text="上架|下架" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="showTpl">
	<input type="checkbox" name="ishow" value="{{d.ishow}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isshow" {{ d.ishow == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="basicinfo">
    <ul>
      <li><strong>名称:</strong> {{= d.title }} </li>
      <li><strong>作者:</strong> {{= d.author }} </li>
      <li><strong>大类:</strong> {{= d.bigcatetitle ? d.bigcatetitle : '--' }} </li>
      <li><strong>小类:</strong> {{= d.sellcatetitle ? d.sellcatetitle : '--' }} </li>
    </ul>
</script>

<script type="text/html" id="attribute">
    <ul>
      <li><strong>风格:</strong> {{= d.style ? d.style : '--' }} </li>
      <li><strong>结局:</strong> {{= d.ending ? d.ending : '--' }} </li>
      <li><strong>标签:</strong> {{= d.label ? d.label : '--' }} </li>
      <li><strong>热度:</strong> {{= d.hits ? d.hits : '--' }} </li>
    </ul>
</script>

<script type="text/html" id="basicdata">
    <ul>
      <li><strong>作品字数:</strong> {{= d.words ? d.words : '--' }} </li>
      <li><strong>总章节数:</strong> {{= d.chapters ? d.chapters : '--' }} </li>
      <li><strong>自定标签:</strong> {{= d.label_custom ? d.label_custom : '--' }} </li>
      <li><strong>作品排序:</strong> {{= d.sort ? d.sort : '--' }} </li>
    </ul>
</script>

<script type="text/html" id="timedata">
    <ul>
      <li><strong>创建时间:</strong> {{= d.create_time ? d.create_time : '--' }} </li>
      <li><strong>更新时间:</strong> {{= d.update_time ? d.update_time : '--' }} </li>
	  <li><strong>完结状态:</strong> {{= parseInt(d.isfinish) ? (parseInt(d.isfinish) === 2 ? '完结' : '连载') : '--' }} </li>
      <li><strong>完结时间:</strong> {{= d.finishtime ? layui.util.toDateString((parseInt(d.finishtime) * 1000), 'yyyy-MM-dd HH:mm:ss') : '--' }} </li>      
    </ul>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool'];
	function feiniaoInit() {
		var table = layui.table, tool = layui.tool, form = layui.form, element = layui.element, upload = layui.upload;
		layui.pageTable = table.render({
			elem: '#book',
			title: '作品表列表',
			toolbar: '#toolbarDemo',
			url: "{:url('book/datalist')}",
			id: 'booklist',
			page: true,
			limit: 20,
			limits: [10,20,30,50,100,500,1000],			
			height: 'full-35',
			lineStyle: 'height: auto;',
			className: 'book_customize_style', // 用于给表格主容器追加 css 类名
			cols: [
				[
				{checkbox: true},
				{
					field: 'id',
					title: '编号',
					align: 'center',
					width: 60
				},{
					field: 'cover',
					title: '封面图片',
					align: 'center',
					width: 100,
					event: 'uploadCover',
					style:'cursor: pointer;',
					templet:function(d) {
						return d.cover ? '<img src="' + d.cover + '" width="80" onerror="javascript:this.src=\'{__ASSETS__}/init/images/data-none.png\';this.onerror=null;">' : '--';
					}
				},{
					field: 'none',
					title: '基本信息',
					width: 230,
					templet: '#basicinfo'
				},{
					field: 'none',
					title: '基本属性',
					width: 230,
					templet: '#attribute'
				},{
					field: 'none',
					title: '基本数据',
					width: 230,
					templet: '#basicdata'
				},{
					field: 'none',
					title: '其他数据',
					width: 230,
					templet: '#timedata'
				},{
					field: 'status',
					title: '是否上架',
					align: 'center',
					width: 80,
					templet: '#statusTpl',
					unresize: true
				},{
					field: 'issign',
					title: '是否签约',
					align: 'center',
					width: 80,
					templet: function(d) {
						return parseInt(d.issign) == 1 ? '<i class="layui-icon layui-icon-ok" style="color: #16b777;"></i>' : '<i class="layui-icon layui-icon-close"></i>';
					}
				},{
					field: 'editor',
					title: '编辑人员',
					align: 'center',
					width: 120
				},
				{
					fixed: 'right',
					field: 'right',
					title: '操作',
					toolbar: '#barDemo',
					align: 'center'
				}				
				]
			]
		});
		
		//监听表头工具栏事件
		table.on('toolbar(book)', function(obj){
			if (obj.event === 'add') {
				tool.side("{:url('book/add')}");
				return false;
			} else if(obj.event === 'import') {
				tool.side("{:url('book/import')}");
				return false;
			} else if(obj.event === 'delete') {
				var id = obj.config.id;
    			var checkStatus = table.checkStatus(id);
				var data = checkStatus.data;
				if(data.length <= 0) return layer.msg('请选择要删除的记录');
				var arr = [];
				$.each(data,function(index,items){
					arr.push(items['id']);					
				})
				layer.confirm('确定要删除相关记录吗?', {
					icon: 3,
					title: '删除提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							layui.pageTable.reload({
								page: {
									curr: 1
								}
							});
						}
					}
					tool.delete("{:url('book/del')}", { id: arr.join(',') }, callback);
					layer.close(index);
				});
				return false;
			}
		});

		//监听性别操作
		form.on('switch(status)', function(obj) {
			var id = obj.othis.parents('tr').find("td:eq(1)").text()
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					obj.update({
						status: obj.elem.checked  === true ? 1 : 0,
					});
				}
			}
			tool.post("{:url('book/savefield')}", {id: id, status: (obj.elem.checked  === true ? 1 : 0)}, callback);
			return false;
		});

		//监听表格行工具事件
		table.on('tool(book)', function(obj) {
			var data = obj.data;
			if (obj.event === 'read') {
				tool.side("{:url('book/read')}?id="+obj.data.id);
			}
			else if (obj.event === 'edit') {
				tool.side("{:url('book/edit')}?id="+obj.data.id);
			}
			else if (obj.event === 'chapter') {
				tool.side("{:url('chapter/datalist')}?bid="+obj.data.id+'&title='+obj.data.title);
			}
			else if (obj.event === 'del') {
				layer.confirm('确定要删除该记录吗?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("{:url('book/del')}", { id: data.id }, callback);
					layer.close(index);
				});
			}
			else if (obj.event === 'uploadCover') {
				//页面层
				layer.open({
					title: '上传封面', //不显示标题
					type: 1,
					skin: 'layui-layer-rim', //加上边框
					area: ['500px', '700px'], //宽高
					btnAlign: 'c',
					btn: ['保存','关闭'], //按钮
					content: '<div class="layui-upload">' + (data.cover ? '<img class="cover" src="' + data.cover + '" style="width: 200px;">' : '') + '<button type="button" class="layui-btn" id="uploadcover">上传封面</button><div class="layui-upload-list"><img class="layui-upload-img" id="cover"><p id="coverText"></p>' +
						'</div><div style="width: 90px;"><div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="coverprogress"><div class="layui-progress-bar" lay-percent=""></div></div></div></div>',
					btn1: function(index) {
						layer.confirm('确定要保存？', {
							btn: ['确定','取消'] //按钮
						}, function() {
							let callback = function (e) {
								layer.msg(e.msg);
								if (e.code == 0) {
									//同步更新缓存对应的值
									obj.tr.find('td[data-field=cover]').attr('data-content', $('#cover').attr('src'));  // 这句代码是必要的
									obj.update({
										cover: $('#cover').attr('src'),
									});
									layer.msg('保存成功！', {icon: 1, time: 500}, function() {
										layer.close(index);
									});
								}
							}
							tool.post("{:url('book/savefield')}", {id: data.id, cover: $('#cover').attr('src')}, callback);
							return false;							
						}, function() {
							layer.close(index);
						});
					}
				});
				//常规使用 - 普通图片上传
				var uploadInst = upload.render({
					elem: '#uploadcover',
					url: "{:url('api/upload')}",
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#cover').attr('src', result); //图片链接（base64）
						});				
						element.progress('coverprogress', '0%'); //进度条复位
					},
					done: function(res) {
						//如果上传失败
						if(res.code > 0){
							return layer.msg('上传失败');
						}
						$('#cover').attr('src', res.data.filepath); //图片链接
						$('#coverText').html(''); //置空上传失败的状态
					},
					error: function() {
						//演示失败状态，并实现重传
						var coverText = $('#coverText');
						coverText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs cover-reload">重试</a>');
						coverText.find('.cover-reload').on('click', function() {
							uploadInst.upload();
						});
					},
					//进度条
					progress: function(n, elem, e) {
						element.progress('coverprogress', n + '%'); //可配合 layui 进度条元素使用
					}
				});
			}
			return false;
		});

		$(document).on('click', '#cover', function() {
			if($(this).attr('src')) {
				layer.open({
					type: 1,
					title: false,
					closeBtn: true,
					shadeClose: true, //点击阴影关闭
					area: [$(this).width + 'px', $(this).height + 'px'], //宽高
					content: "<img src=" + $(this).attr('src') + " />"
				});
			}
		});

		window.showBigImage = function (e) {
			layer.open({
				type: 1,
				title: false,
				closeBtn: true,
				shadeClose: true, //点击阴影关闭
				area: [$(e).width + 'px', $(e).height + 'px'], //宽高
				content: "<img src=" + $(e).attr('src') + " />"
			});
		};

		//监听搜索提交
		form.on('submit(searchform)', function(data) {
			layui.pageTable.reload({
				where: {
					keywords: data.field.keywords,
					cate_id: data.field.cate_id,
					coll_source_id: data.field.coll_source_id
				},
				page: {
					curr: 1
				}
			});
			return false;
		});
	}
</script>
{/block}
<!-- /脚本 -->